<template>
  <div class="container">
    <!-- 园区数据 --  快捷入口 -->
    <div class="app-container">
      <!-- 园区数据 -->
      <el-card class="box-card" style="width:55vw">
        园区数据
        <div class="box-card1">
          <div style="width:10vw" class="box-card11">
            <p>年度累计收费（元）</p>
            <p>50380.36</p>
          </div>
          <div style="width:10vw" class="box-card11">
            <p>入驻企业总数（个）</p>
            <p>5</p>
          </div>
          <div style="width:10vw" class="box-card11">
            <p>月卡车辆总数（辆）</p>
            <p>6</p>
          </div>
          <div style="width:10vw" class="box-card11">
            <p>一体杆总数（台）</p>
            <p>48</p>
          </div>
        </div>
      </el-card>
      <!-- 快捷入口 -->
      <el-card class="box-card1" style="width:25vw">
        <div>快捷入口</div>
        <div class="box-card1">
          <div style="width:5vw" class="box-card1-2">
            <img src="@/assets/shouye/Ivg (1).png" alt="" class="add1">
            <p>添加企业</p>
          </div>
          <div style="width:5vw" class="box-card1-2">
            <img src="@/assets/shouye/Ivg (2).png" alt="" class="add1">
            <p>员工管理</p>
          </div>
          <div style="width:5vw" class="box-card1-2">
            <img src="@/assets/shouye/Ivg (3).png" alt="" class="add1">
            <p>添加账号</p>
          </div>
          <div style="width:5vw" class="box-card1-2">
            <img src="@/assets/shouye/Ivg (4).png" alt="" class="add1">
            <p>数据大屏</p>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 年度收入统计  --  设备告警派单-->
    <div class="app-container">
      <!-- 年度收入统计 -->
      <el-card class="box-card" style="width:55vw">
        年度收入统计
        <div>
          <tuBiao />
        </div>
      </el-card>
      <!-- 设备告警派单 -->
      <el-card class="box-card2-2" style="width:25vw">
        <div>设备告警派单</div>
        <div>
          <div style="width:5vw" class="box-card2-1">
            <i class="el-icon-search  add2-2" />
            <el-button type="primary" class="box-card2-button">更多 <span>></span></el-button>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 临期合同提醒 -->
    <div>
      <el-card class="box-card3-1" style="width:53vw">
        临期合同提醒
        <div>
          <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60"
            />
            <el-table-column
              prop="enterpriseName"
              label="企业名称"
              width="150"
            />
            <el-table-column
              prop="buildingName"
              label="租赁楼宇"
              width="150"
            />  <el-table-column
              prop="startTime"
              label="租赁时间"
              width="150"
            />
            <el-table-column
              prop="address"
              label="操作"
              width="200"
            >
              <template>
                <el-button>删除</el-button>
                <el-button>编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            :current-page="formData.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="formData.pageSize"
            layout="total, prev, pager, next, sizes"
            :total="formData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import tuBiao from '@/views/workbench/components/tuBiao.vue'
import { getHomeWorkbenchRentInfo } from '@/api/workbench/workbench'
export default {
  name: 'Workbench',
  components: {
    tuBiao
  },
  data() {
    return {
      currentPage: 1,
      tableData: [],
      formData: {
        page: 1,
        pageSize: 5,
        total: 1

      }

    }
  },
  async created() {
    const res = await getHomeWorkbenchRentInfo(this.formData)
    this.tableData = res.data.rows
    this.formData.total = res.data.total
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    handleSizeChange(page) {
      this.formData.page = page
    },
    handleCurrentChange(pageSize) {
      this.formData.pageSize = pageSize
    }
  }
}
</script>
<style scoped>
.app-container{
  display: flex;
align-content: center;
}
.box-card1{
margin-left: 15px;
}
.box-card1{
  display: flex;
justify-content: center;

}
 .box-card11{
  margin: 0 auto;
 }
 .add1{
  width: 50px;
  height: 50px;
  text-align: center;
  margin-left: 10px;
 }
 .box-card1-2{
  margin-top: 20px ;
  margin-left: 5px ;
 }
 .box-card2-2{
  margin-left:2.1vw;
  height: 350px;
 }
 .add2-2{
  font-size: 100px;
  text-align: center;
  margin-left:12px;
  margin-left: 100px ;
 }
 .box-card2-1{
    margin-top: 60px ;
 }
 .box-card2-button{
  display: block;
   margin-top: 60px ;
   width: 200px;
    margin-left: 70px ;
 }
 .box-card3-1{
  height: 30vw;
 margin-left: 20px ;
 margin-bottom: 20px;
 }
   .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .block{
    margin-left: 330px;
    margin-top: 30px;
  }
</style>
